<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<!-- <myTabs :backgroundColor="#fff"></myTabs> -->
		<myTabs :title="title" @goBlack="goBlack" :mybackgroundColor="'#F0F0F0'"></myTabs>
		
		<view class="pages_orderBox" v-if="informationList.length">
			<view class="pages_orderItems" v-for="(item,index) in informationList" :key="index">
				<view class="pages_orderReject" v-if="item.orderStatus==10">
					解锁失败，费用原路返回
				</view>
				<view class="pages_orderRejectCopy" v-if="item.orderStatus==10"></view>
				<view class="pages_orderItemsTop">
					<span>{{item.product.productType==10? '情报' : item.product.productType==20? '课程' :  item.product.productType==30? '社区' :''}}解锁订单</span>
					<span>{{item.payTime | ff_payTime}}</span>
				</view>
				<view class="pages_orderItemsBottom">
					<span>{{item.product.productName}}</span>
					<span>¥{{item.totalPrice}}</span>
				</view>
			</view>
		</view>
	<view class="biaoyuBox" v-else>
		<image class="biaoyuImg" src="/static/img/kongIcon.png"></image>
		<p class="biaoyu">暂无订单～</p>
	</view>
	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				title: '我的订单',
				pageNum: 1,
				isPageSize: true,
				informationList: []
			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.init();
		},
		onReachBottom() {
			if(this.isPageSize){
				this.pageNum++;
				this.init();
			}
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		filters:{
			ff_payTime(val){
				let date = new Date(val)
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				var day = date.getDate()
				var hour = date.getHours()
				var minute = date.getMinutes()
				// const second = date.getSeconds()
				
				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				
				return [year, month, day].map(formatNumber).join('.') + ' ' + [hour, minute].map(formatNumber).join(':') 
			}
		},
		methods:{
			init(){
				let req = {
					pageSize : 10,
					pageNum:　this.pageNum
				}
				this.$api.orderGetList(req).then(res=>{
					console.log('res--->',res)
					if(res.code==200){
						this.informationList = [...this.informationList,...res.rows];
						if(this.informationList.length == res.total){
							this.isPageSize = false
						}
					}
				})
			},
			goBlack(){
				uni.navigateBack();
			}
		}
	}
</script>
<style lang="scss" scoped>
.pages_intelligence{
	background-color: #F0F0F0;
	min-height: 100vh;
	box-sizing: border-box;
	.biaoyuBox{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 240rpx;
	}
	.biaoyuImg{
		width: 320rpx;
		height: 320rpx;
	}
	.biaoyu{
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #999;
		text-align: center;
	}
	.pages_orderBox{
		width: 100%;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
	}
	.pages_orderItems{
		background-color: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 16rpx;
		position: relative;
		    overflow: hidden;
	}
	.pages_orderReject{
		padding: 0 24rpx;
		border-bottom-right-radius: 24rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #fff1ee;
		color: #FF471C;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		
	}
	.pages_orderRejectCopy{
		height: 40rpx;
	}
	.pages_orderItemsBottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		span{
			display: inline-block;
		}
		span:nth-child(1){
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34rpx;
			color: #999999;
		}
		span:nth-child(2){
			height: 38rpx;
			line-height: 38rpx;
			font-size: 24rpx;
			font-family: DIN;
			font-weight: bold;
			color: #FF471C;
		}
	}
	.pages_orderItemsTop{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		span{
			display: inline-block;
		}
		span:nth-child(1){
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 40rpx;
			color: #000000;
		}
		span:nth-child(2){
			height: 32rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
			color: #999999;
		}
	}
}
</style>

